<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css" />
    <style>
        #map {
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
    <script>
        var map = L.map('map').setView([28.251818487944, 113.08755916596], 13);
 
        L.tileLayer('http://localhost:3000/{z}/{x}/{y}/tile.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
 
        var drawnItems = new L.FeatureGroup();
        map.addLayer(drawnItems);
 
        var drawControl = new L.Control.Draw({
            draw: {
                polyline: true,
                polygon: true,
                rectangle: true,
                circle: true,
                marker: true
            },
            edit: {
                featureGroup: drawnItems
            }
        });
        map.addControl(drawControl);
 
        map.on(L.Draw.Event.CREATED, function (event) {
            var layer = event.layer;
            drawnItems.addLayer(layer);
        });
    </script>
</body>
</html>